<template>
  <customHeader
    title="分类信息"
    :showBack="false"
    :backgroundGradient="'linear-gradient(135deg,#4a90e2,#67b8f7)'"
    class="customHeader"
  />

  <view class="cate-container">
    <!-- 搜索框 -->
    <view class="search-box">
      <view class="search-input">
        <text class="search-icon gui-icons">&#xe614;</text>
        <input
          type="text"
          placeholder="搜索品牌"
          v-model="query.brand_name"
          @input="handleSearch"
        />
      </view>
    </view>
    <!-- 分类内容区域 -->
    <view class="cate-content">
      <!-- 左侧分类导航 -->
      <scroll-view class="cate-sidebar" scroll-y>
        <view
          v-for="(category, index) in cateList"
          :key="index"
          class="cate-sidebar-item"
          :class="{ active: currentCateIndex === index }"
          @tap="switchCategory(index)"
        >
          {{ category.name }}
        </view>
        <view style="height: 120rpx; width: 100%"></view>
      </scroll-view>

      <!-- 右侧分类详情 -->
      <scroll-view class="cate-detail" scroll-y>
        <block
          v-if="currentCategory"
          v-for="(twoCate, index) in currentCategory.brandData"
        >
          <!-- 分类品牌列表 -->
          <view class="brand-list">
            <!-- 数据返回结构特殊,第一项的子级品牌在最外部，第二项开始才是正常的 -->
            <view
              v-for="(brand, brandIndex) in index === 0
                ? currentCategory.brandData
                : twoCate.brandData"
              :key="brandIndex"
              class="brand-item"
              @tap="navigateToBrand(brand)"
            >
              <image
                class="brand-logo"
                :src="brand.logo_url"
                mode="cover"
                webg
              ></image>
              <view class="brand-name">{{ brand.name }}</view>
            </view>
          </view>
        </block>
        <view
          v-if="cateList.length === 0 || currentCategory.brandData.length === 0"
          class="empty"
        >
          <image
            src="https://cphimg.leyoo888.com/dev/upload/supplier/2025-05-07/1746582743270.png"
            class="empty-img"
          />
          <span class="empty-text">暂无品牌数据,请重新搜索</span>
        </view>
        <view style="height: 120rpx; width: 100%"></view>
      </scroll-view>
    </view>

    <!-- 底部 Tabbar -->
    <tabbar :currentIndex="currentIndex" @tabChange="handleTabChange"></tabbar>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from "vue";
import { getBrandAndCateToGoods } from "@/apiShop/goods";
import { onLoad } from "@dcloudio/uni-app";
import customHeader from "@/component/customHeader.vue";
import tabbar from "../components/tabbar.vue";
// 搜索关键词
const currentIndex = ref(1);
// 当前选中的分类索引
const currentCateIndex = ref(0);
const query = ref({
  page: 1,
  limit: 99,
  brand_name: "",
});

// 过滤后的分类列表
const filteredCategories = computed(() => {
  return cateList.value;
});

// 当前选中的分类
const currentCategory = computed(() => {
  if (filteredCategories.value.length === 0) {
    return null;
  }
  return filteredCategories.value[currentCateIndex.value];
});

// 切换分类
const switchCategory = (index) => {
  currentCateIndex.value = index;
};
const timer = ref(null);
// 处理搜索
const handleSearch = () => {
  clearTimeout(timer.value);
  timer.value = setTimeout(async () => {
    await getGoodsList();
    if (cateList.value.length > 0) {
      currentCateIndex.value = 0;
      return;
    }
  }, 500);
};
// 处理标签页切换
const handleTabChange = (index) => {
  currentIndex.value = index;
  // 这里可以添加页面跳转逻辑
  switch (index) {
    case 0:
      uni.reLaunch({ url: "/pagesShop/store/storeHome" });
      break;
    case 1:
      uni.reLaunch({ url: "/pagesShop/cate/index" });
      break;
    case 2:
      uni.reLaunch({ url: "/pagesShop/mine/index" });
      break;
  }
};

// 导航至品牌详情
const navigateToBrand = (brand) => {
  // 实际开发中可以跳转到品牌详情页
  uni.navigateTo({
    url: `/pagesShop/supplier/supplierBrand?id=${brand.brand_id}&brand_name=${brand.name}`,
  });
};
const cateList = ref([]);
const getGoodsList = async () => {
  const res = await getBrandAndCateToGoods(query.value);
  cateList.value = res.data;
};
const silderWindowHeight = ref(0);
// 组件挂载时，默认选择第一个分类
onLoad(async () => {
  await getGoodsList();
  if (cateList.value.length > 0) {
    currentCateIndex.value = 0;
  }

  nextTick(() => {
    uni
      .createSelectorQuery()
      .select(".customHeader") // 使用 customHeader 组件的根类名
      .boundingClientRect()
      .exec((res) => {
        if (res[0]) {
          silderWindowHeight.value = res[0].height;
          console.log(silderWindowHeight.value, "silderWindowHeight.value");
        }
      });
  });
});
</script>

<style lang="scss" scoped>
.cate-container {
  display: flex;
  flex-direction: column;
  /* height: calc(100vh - 294rpx) ; */
  // height: calc(100vh - v-bind(silderWindowHeight+'px') - 130rpx);
  // padding-bottom: 90rpx;
}

.search-box {
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 100;

  .search-input {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 40rpx;
    padding: 10rpx 20rpx;

    .search-icon {
      font-size: 30rpx;
      color: #999;
      margin-right: 10rpx;
    }

    input {
      flex: 1;
      height: 60rpx;
      font-size: 28rpx;
    }
  }
}

.cate-content {
  display: flex;
  // flex: 1;
  overflow: hidden;
  height: 80vh;
  // height: calc(100vh - v-bind(silderWindowHeight + "px") - 130rpx);
}

.cate-sidebar {
  width: 200rpx;
  background-color: #f5f5f5;
  height: 80vh;

  .cate-sidebar-item {
    padding: 30rpx 20rpx;
    font-size: 28rpx;
    text-align: center;
    position: relative;
    color: #333;

    &.active {
      background-color: #ffffff;
      color: #1989fa;
      font-weight: bold;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 30%;
        height: 40%;
        width: 6rpx;
        background-color: #1989fa;
      }
    }
  }
}

.cate-detail {
  flex: 1;
  background-color: #ffffff;
  padding: 20rpx;
  height: 80vh;
}

.cate-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  position: relative;
  padding-left: 20rpx;

  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 25%;
    height: 50%;
    width: 6rpx;
    background-color: #1989fa;
  }
}

.sub-category-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30rpx;

  .sub-category-title {
    padding: 10rpx 20rpx;
    margin: 10rpx;
    background-color: #f5f5f5;
    border-radius: 30rpx;
    font-size: 24rpx;
    color: #666;
  }
}

.brand-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  // justify-content: space-between;

  .brand-item {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30rpx;

    .brand-logo {
      width: 160rpx;
      height: 160rpx;
      margin-bottom: 10rpx;
      border-radius: 10rpx;
    }

    .brand-name {
      font-size: 24rpx;
      color: #333;
      text-align: center;
    }
  }
}

/* 图标字体 */
.gui-icons {
  font-family: "gui-iconfont";
  font-style: normal;
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
  justify-content: center;
  margin-top: 6%;
  .empty-img {
    width: 200rpx;
    height: 200rpx;
    object-fit: cover;
  }
}
</style>
